<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
  <meta charset="utf-8">
  <title>Elastic Library</title>
  <meta name="description" content="Literary Classic Search Engine.">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
  <link href="https://cdnjs.cloudflare.com/ajax/libs/normalize/7.0.0/normalize.min.css" rel="stylesheet" type="text/css" />
  <link href="https://cdn.muicss.com/mui-0.9.20/css/mui.min.css" rel="stylesheet" type="text/css" />
  <link href="https://fonts.googleapis.com/css?family=EB+Garamond:400,700|Open+Sans" rel="stylesheet">
  <link href="styles.css" rel="stylesheet" />
</head>
<body>
<div class="app-container" id="vue-instance">

    <!-- 搜索栏 Header -->
    <div class="mui-panel">
        <div class="mui-col-md-10">
            <div class="mui-textfield">
                <input v-model="searchTerm" type="text" v-on:keyup="onSearchInput()">
                <label>Search</label>
            </div>
        </div>
        <!--文件上传-->
        <div class="mui-col-md-2">
            <div id="app">
                <input type="file" multiple id="files" name="files" @change="changeFile" style="display:none;" />
                <button @click="selectfile" class="mui-btn mui-btn--raised">选择文件</button>
                <button @click="upload" class="mui-btn mui-btn--raised">点击上传</button><br />
                <p>{{fileCount}}&nbsp;&nbsp;{{rate}} </p>
            </div>
        </div>
    </div>

    <!-- 搜索元信息 -->
    <div class="mui-panel">
        <div class="mui-col-md-10">
            <div class="mui--text-headline">{{ numHits }} 命中</div>
            <div class="mui--text-subhead">展示结果： {{ searchOffset }} - {{ searchOffset + 9 }}</div>
        </div>
        <div class="mui-col-md-2">
            <div class="mui--text-headline">&nbsp;</div>
            <div class="mui--text-subhead" style="text-align: right">共收录文档{{ docCount }} 篇</div>
        </div>
    </div>

    <!-- 搜索结果卡片列表 -->
    <div class="search-results" ref="searchResults">
      <div class="mui-panel" v-for="hit in searchResults" v-on:click="showBookModal(hit)">
        <div class="mui--text-subhead">文件名：{{ hit._source.file.filename }}</div>
        <div class="mui-divider"></div>
        <!-- <div class="mui--text-title" v-html="hit.highlight.text[0]"></div> -->
        <div v-if="hit.highlight['path.real.fulltext']" v-html="hit.highlight['path.real.fulltext']"></div>
        <div v-for="content in hit.highlight.content">
            <div v-if="content" v-html="content"></div>
        </div>
        <!-- <div class="mui--text-title" v-html="hit.highlight.content"></div> -->
        <!-- <div class="mui--text-subhead">{{ hit._source.title }} - {{ hit._source.author }}</div> -->
        <!-- <div class="mui--text-body2">Location {{ hit._source.location }}</div> -->
        <!-- <div class="mui--text-body2">{{ hit._source.content }}</div> -->
      </div>
    </div>

    <!-- 底部分页卡片 -->
    <div class="mui-panel pagination-panel">
        <button class="mui-btn mui-btn--flat" v-on:click="prevResultsPage()">上一页</button>
        <button class="mui-btn mui-btn--flat" v-on:click="nextResultsPage()">下一页</button>
    </div>

    <!-- Book Paragraphs Modal Window -->
    <div v-if="selectedParagraph" ref="bookModal" class="book-modal">
      <div class="paragraphs-container">
        <!-- Book Section Metadata -->
        <div class="title-row">
          <div class="mui--text-display2">{{ selectedParagraph._source.file.filename }}</div>
          <!-- <div class="mui--text-display1">{{ selectedParagraph._source.file.created }}</div> -->
        </div>
        <br>
        <div class="mui-divider"></div>
        <!-- <div class="mui--text-subhead locations-label">Locations </div> -->
        <div class="mui-divider"></div>
        <br>

        <!-- Book Paragraphs -->
        <div class="mui--text-body1">
          <pre>
              {{ selectedParagraph._source.content }}
          </pre>
        </div>
      </div>

      <!-- 底部分页卡片 -->
      <div class="modal-footer">
        <!-- <button class="mui-btn mui-btn--flat" v-on:click="prevBookPage()">Prev Page</button> -->
        <button class="mui-btn mui-btn--flat" v-on:click="closeBookModal()">关闭</button>
        <!-- <button class="mui-btn mui-btn--flat" v-on:click="nextBookPage()">Next Page</button> -->
      </div>
    </div>
</div>
<script src="https://cdn.muicss.com/mui-0.9.28/js/mui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.3/vue.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.17.0/axios.min.js"></script>
<!-- Include vuejs-dialog plugin -->
<link href="./vuejs-dialog.min.css" rel="stylesheet">
<script type="text/javascript" src="./vuejs-dialog.min.js"></script>
<script src="app.js"></script>
<script>
  // Tell Vue to install the plugin.
  window.Vue.use(VuejsDialog.main.default)
</script>
</body>
</html>